import React, {useState} from 'react';
import {
  Alert,
  Image,
  ImageBackground,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import RnInput from 'components/RnInput';
import Icon from 'react-native-vector-icons/FontAwesome';

import {useDispatch} from 'react-redux';
import actions from 'reduxState/actions';
//import {User} from 'types';
import RnButton from 'components/RnButton';
import lang from 'lang';
import useLanguageUpdate from 'hooks/useLanguageUpdate';
import SetLanguage from './SetLanguage';
import {post} from 'utils/request';
import {ResponseType} from 'types';
const App = () => {
  const dispatch = useDispatch();
  useLanguageUpdate();
  const [modalVisible, setModalVisible] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isSigninInProgress, setIsSigninInProgress] = useState(false);
  let user, isOk, errMsg;
  async function login() {
    setIsSigninInProgress(true);
    try {
      const {ok, data, msg}: ResponseType = await post('/auth/token', {
        username,
        password,
      });
      user = data;
      isOk = ok;
      errMsg = msg;
    } finally {
      setIsSigninInProgress(false);
    }
    if (isOk) {
      dispatch(actions.setUser(user));
    } else {
      Alert.alert(errMsg || '登录失败，请检查网络和输入后重试');
    }
  }
  return (
    <>
      <View style={styles.container}>
        <ImageBackground
          style={styles.bg}
          source={require('assets/Street-Dance-01.jpg')}>
          <View style={styles.mainContainer}>
            <Text style={styles.subtitle}>{lang('Login.subtitle')}</Text>
            <Text style={styles.title} onPress={() => setModalVisible(true)}>
              {lang('Login.title')}
            </Text>
            <Image
              style={styles.tinyLogo}
              source={require('assets/icons/logo-cat.png')}
            />
            <RnInput
              placeholder={lang('Login.placeholderUser')}
              placeholderColor="#fff"
              styles={styles.input}
              before={<Icon name="user-circle" size={17.8} color="#FFD3C1E5" />}
              value={username}
              onChange={setUsername}
            />
            <RnInput
              placeholder={lang('Login.placeholderPwd')}
              placeholderColor="#fff"
              styles={styles.input}
              secureTextEntry
              before={<Icon name="key" size={17.8} color="#FFD3C1E5" />}
              value={password}
              onChange={setPassword}
            />
          </View>
        </ImageBackground>
        <SetLanguage
          modalVisible={modalVisible}
          setModalVisible={setModalVisible}
        />
      </View>
      <RnButton
        style={styles.signinButton}
        fontSize={27.4}
        disabled={isSigninInProgress}
        onPress={login}>
        {lang('Login.login')}
      </RnButton>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bg: {
    flex: 1,
  },
  mainContainer: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'rgba(133, 96, 169, 0.7)',
  },
  inputContainer: {
    width: '95%',
    backgroundColor: '#ffffff88',
    padding: 12,
    borderRadius: 16,
  },
  input: {
    marginVertical: 10,
    borderRadius: 26.7,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#fff',
    color: '#fff',
    fontSize: 21.3,
  },
  title: {
    fontSize: 32,
    lineHeight: 36,
    marginTop: 21.3,
    marginBottom: 40,
    color: 'rgba(213, 239, 127, 1)',
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 21.3,
    color: 'rgba(213, 239, 127, 1)',
    marginTop: 92,
  },
  tinyLogo: {
    width: 85.3,
    height: 85.3,
  },
  icon: {
    fontSize: 24,
    marginRight: 10,
  },
  signinButton: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(213, 239, 127, 1)',
    height: 64,
  },
  link: {
    fontSize: 16,
    color: '#0366d6',
    fontWeight: 'bold',
  },
});

export default App;
